<template>
  <div class="">
    <!-- 顶部 -->
    <div class="con3">
      <div class="con-title">
        Onta Network<br />
        Explorer
      </div>
      <div class="datas">
        <div class="data">
          <div class="data-num">1,534,200+</div>
          <div class="data-desc">Total Transactions</div>
        </div>
        <div class="data">
          <div class="data-num">1,000,000+</div>
          <div class="data-desc">Total Merchants</div>
        </div>
        <div class="data">
          <div class="data-num">1,053</div>
          <div class="data-desc">KYC’d Users</div>
        </div>
        <div class="data">
          <div class="data-num">10</div>
          <div class="data-desc">Countries</div>
        </div>
      </div>
    </div>
    <!-- 地图部分 -->
    <div class="map-box">
      <div class="map">
        <Map :can="canClickNameList" @countryClick="countryClick"></Map>
      </div>
      <div class="map-info">
        <div class="loading-mark" v-if="!mapInfoObj.locationName">
          <van-loading color="#0283EF" size="30" />
        </div>
        <div class="map-title">{{ mapInfoObj.locationName }}</div>
        <div class="map-item">
          <div class="map-item-name">Total Merchant Number</div>
          <div class="map-item-value">{{ thousandSplit(mapInfoObj.totalMerchantNumber || 0) }}</div>
        </div>
        <div class="map-item">
          <div class="map-item-name">Total Transaction Number</div>
          <div class="map-item-value">
            {{ thousandSplit(mapInfoObj.totalTransactionNumber || 0) }}
          </div>
        </div>
        <div class="map-item">
          <div class="map-item-name">Transaction Growth</div>
          <div class="map-item-value">
            {{ thousandSplit(mapInfoObj.transactionGrowth || 0) }}%(last month)
          </div>
        </div>
        <div class="map-item">
          <div class="map-item-name">Total User Number</div>
          <div class="map-item-value">{{ thousandSplit(mapInfoObj.totalUserNumber || 0) }}</div>
        </div>
        <div class="map-item">
          <div class="map-item-name">User Growth</div>
          <div class="map-item-value">
            {{ thousandSplit(mapInfoObj.userGrowth || 0) }}%(last month)
          </div>
        </div>
      </div>
    </div>
    <!-- 数据部分 -->
    <div class="datas">
      <!-- <div class="data-select">
        <el-select v-model="hoursValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div> -->
      <!-- 交易列表 -->
      <div class="con-title">Live Transactions</div>
      <div class="table">
        <div class="item" v-for="(item, index) in tableList" :key="index">
          <div class="code">
            <div>{{ item.transactionId }}</div>
            <div class="date">{{ item.captureTime }}</div>
          </div>
          <div class="country">{{ item.locationName }}</div>

          <div class="amount">{{ item.cryptoAmount }}{{ item.cryptoSymbol }}</div>
        </div>
      </div>
      <!-- <div class="view-all">View All</div> -->
    </div>
    <!--  -->
    <div class="experience">
      <Experience></Experience>
    </div>
  </div>
</template>

<script>
import Map from '@/components/Map/index.vue'
import Experience from '@/components/Experience/index.vue'
// import { tableList, mapInfoList } from './mock.js'
import { pageLiveTransactionDto, selectTransactionSumZoneDtoList } from '@/utils/api.js'
import { thousandSplit } from '@/utils/index'
export default {
  name: 'WebMapPage',
  components: {
    Map,
    Experience
  },
  data() {
    return {
      thousandSplit,
      value: 1,
      tableList: [],
      mapInfoObj: [],
      canClickNameList: ['Singapore', 'Japan'],
      options: [
        { value: 1, label: '24h' },
        { value: 2, label: '1day' },
        { value: 3, label: '1week' }
      ]
    }
  },
  beforeMount: function () {},
  mounted() {
    // 数字自增动画
    this.$nextTick(() => {
      const numList = document.querySelectorAll('.data-num')
      numList.forEach((item) => {
        let num = 0
        const targetNum = parseInt(item.innerText.replace(/,/g, ''))
        const timer = setInterval(() => {
          if (num >= targetNum) {
            clearInterval(timer)
          } else {
            num += Math.ceil(targetNum / 100)
            item.innerText = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          }
        }, 10)
      })
    })
    // 打开loading
    this.getMapData()
  },
  methods: {
    getMapData() {
      selectTransactionSumZoneDtoList().then((res) => {
        if (res.code === '000000') {
          this.mapInfoList = res.data || []
          this.canClickNameList = res.data.map((item) => {
            return item.locationName
          })
        }
      })

      pageLiveTransactionDto().then((res) => {
        if (res.code === '000000') {
          let records = res.data.records
          for (let i = 0; i < records.length; i++) {
            records[i].captureTime = this.formatDate(records[i].captureTime)
          }
          this.tableList = res.data.records || []
        }
      })
    },

    formatDate(dateString) {
      const date = new Date(dateString)

      // 获取小时和分钟
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')

      // 获取日期
      const day = date.getDate()

      // 获取月份名称
      const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
      const month = months[date.getMonth()]

      // 获取年份
      const year = date.getFullYear()

      // 添加日期后缀
      const getDaySuffix = (day) => {
        if (day > 3 && day < 21) return 'th'
        switch (day % 10) {
          case 1:
            return 'st'
          case 2:
            return 'nd'
          case 3:
            return 'rd'
          default:
            return 'th'
        }
      }

      return `${hours}:${minutes}, ${day}${getDaySuffix(day)} ${month} ${year}`
    },
    // 地图点击事件
    countryClick(obj) {
      let t = this
      console.log('地图 countryCode', obj.countryName)
      t.mapInfoList.length != 0 &&
        t.mapInfoList.forEach((item) => {
          if (item.locationName === obj.countryName) {
            t.mapInfoObj = item
          }
        })
      console.log(t.mapInfoList, '地图', t.mapInfoObj)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.less');
:deep(.el-loading-mask) {
  background: rgba(0, 0, 0, 0.85) !important;
}
</style>
